<template>
  <div class="fence-column">
    <fence-column-card
      v-model="leftColumn"
      :title="leftColumn.title"
      :tag="leftColumn.tag"
      :items="leftColumn.items"
    />
    <em-place-holder
      vertical
      line-through
    />
    <fence-column-card
      v-model="rightColumn"
      :title="rightColumn.title"
      :tag="rightColumn.tag"
      :items="rightColumn.items"
    />
  </div>
</template>

<script>
import FenceColumnCard from './FenceColumnCard'
export default {
  name: 'FenceColumn',
  components: {
    FenceColumnCard
  },
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      left: {
        header: {
          title: '品牌特卖',
          tag: '爆款低价'
        },
        setting: {
          cols: 2
        },
        styles: null,
        items: []
      },
      right: {
        header: {
          title: '新品发售',
          tag: '最近上新'
        },
        setting: {
          cols: 2
        },
        styles: null,
        items: []
      }
    }
  },
  computed: {
    options: {
      get() {
        const { header, setting, styles, items } = this.value
        return {
          header,
          setting,
          styles,
          items
        }
      },
      set(v) {
        this.value = v
      }
    },
    children: {
      get() {
        if (this.value) {
          return this.value.children || []
        }
        return []
      },
      set(v) {
        this.value.children = v
      }
    },
    leftColumn: {
      get() {
        var options = this.left
        if (this.children[0]) {
          options = this.children[0].options
        }
        return options
      },
      set(v) {
        this.$set(this.children, 0, v)
      }
    },
    rightColumn() {
      var options = this.right
      if (this.children[1]) {
        options = this.children[1].options
      }
      console.log('options', options)
      return options
    }
  }
}
</script>

<style lang="scss" scoped>
.fence-column {
  position: relative;
  display: flex;
  height: 100%;
}
</style>
